<template>
  <div class="header-top">
    <div class="header-top-left">
      <span>尚品汇欢迎您！</span>
      <span>请</span>
      <span class="login"><router-link to="/login">登录</router-link></span>
      <span><router-link to="/register">注册</router-link></span>
    </div>
    <div class="header-top-right">
      <ul>
        <li>我的订单</li>
        <li>我的购物车</li>
        <li>我的尚品汇</li>
        <li>尚品汇会员</li>
        <li>企业采购</li>
        <li>关注尚品汇</li>
        <li>合作招商</li>
        <li>商家后台</li>
      </ul>
    </div>
  </div>
  <div class="header-bottom">
    <img src="./images/logo.b2878689.png">
    <div>
      <input type="text">
      <button>搜素</button>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Header'
}
</script>

<script setup lang="ts">

</script>

<style lang="less">
.header-top{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #eee;
  font-size: 12px;
  color: #666;
  font-weight: 400;
}
.header-top-left{
  .login{
    border-right: 1px solid black;
  }
  a{
    padding: 0 5px;
  }
}
.header-top-right{
  li{
    float: left;
    border-right: 1px solid black;
    padding: 0 10px;
  }
  li:last-child{
    border-right: none;
    padding: 0 0 0 10px;
  }
}
.header-bottom{
  display: flex;
  justify-content: space-between;
  height: 60px;
  margin: 0 20px;
  img{
    
  }
  &>div{
    line-height: 60px;
    &>input{
      width: 510px;
      height: 30px;
      padding: 0 5px;
      box-sizing: border-box;
      border: 1px solid red;
      outline: none;
      font-size: 14px;
    }
    &>button{
      width: 80px;
      height: 30px;
      border: none;
      color: white;
      background-color: red;
    }
  }
}
</style>